<!-- 登录 -->
<script setup>
import { ref, reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app'
import { toast, guid } from '@/uni_modules/uview-plus'
import { register } from '@/api/user.js'
// 数据
const data = reactive({
  loginCode: ''
})
// 页面显示
onShow(() => {
  uni.login({
    provider: 'weixin', //使用微信登录
    onlyAuthorize: true,
    success: function (loginRes) {
      // console.log(loginRes.code);
      data.loginCode = loginRes.code
    }
  });
})
// 选中协议
const checked = ref(false)

// 校验是否勾选协议
function isCheckedAg() {
  if (!checked.value) {
    toast('请先同意协议!')
  }
  return
}
// 登录
function login(e) {
  console.log('获取的登录信息：', e)
  if (!e.detail.code) {
    toast('您已取消授权登录!')
  } else {
    register({
      phoneCode: e.detail.code,
      loginCode: data.loginCode,
      state: guid(),
    })
      .then(res => {
        // console.log('res', res)
        const { accessToken, userId, openid } = res.data
        // 保存登录数据
        uni.setStorageSync('accessToken', accessToken);
        uni.setStorageSync('userId', userId);
        uni.setStorageSync('openid', openid);
        // 返回上一个页面
        uni.navigateBack()
        // getUserInfoApi({})
        //   .then(res => {
        //     console.log(res)
        //   })
      })
  }
}
// 前往协议详情页面
const goDetail = (id) => {
  uni.navigateTo({
    url: `/subPackage/my/agreement/detail?id=` + id
  })
}
</script>

<template>
  <view class="login-page">
    <u-toast ref="uToastRef"></u-toast>
    <view class="logo-box">
      <image style="width: 508rpx; height: 508rpx;" mode="aspectFit" src="/static/images/logo.png"></image>
      <text>千岛季 打造高端水品牌</text>
    </view>
    <button v-if="checked" class="up-reset-button btn" openType="getPhoneNumber" @getphonenumber="login">微信授权登录</button>
    <button v-else class="up-reset-button btn" @click="isCheckedAg">微信授权登录</button>
    <view class="agreement-box">
      <u-checkbox v-model:checked="checked" usedAlone activeColor="#F9C45E" shape="square" label="" />
      <text>我已阅读并同意</text>
      <text class="ag" @click="goDetail(1)">《用户协议》</text>
      <text class="ag">、</text>
      <text class="ag" @click="goDetail(2)">《隐私协议》</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.login-page {
  text-align: center;

  // logo
  & .logo-box {
    padding-top: 284rpx;
    display: flex;
    align-items: center;
    flex-direction: column;

    & text {
      margin-top: 50rpx;
      font-weight: 400;
      font-size: 30rpx;
      color: #000000;
    }
  }

  // 按钮
  & .btn {
    margin-top: 110rpx;
    width: 630rpx;
    height: 96rpx;
    line-height: 96rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;
    background: linear-gradient(146deg, #5CBA82 0%, #2582B4 100%);
    border-radius: 10rpx;
  }

  // 协议
  & .agreement-box {
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 24rpx;
    color: #989898;

    &::v-deep .u-checkbox .u-checkbox__icon-wrap {
      width: 24rpx !important;
      height: 24rpx !important;

      & .u-icon__icon {
        font-size: 20rpx;
        line-height: 20rpx;
      }
    }

    & .ag {
      color: #F9C45E
    }
  }
}
</style>